<template>
  <view>
    <!-- 前两个按钮保持原有点击事件 -->
    <button @click="onSetTimeCall()">单词定时器setTimeout</button>
    <button @click="onSetTimeCallxy('wangziyu', password)">带参数setTimeout</button>
    <button @click="onTimeoutClear()" type="warn">取消定时器clearTimeout</button>
    <!-- 给“启动周期定时器”按钮加class，便于单独设置样式 -->
    <button @click="onIntervalStart()" class="blue-btn">启动周期定时器setInterval</button>
    <button @click="onClearInter()" type="warn">停止周期定时器clearInterval</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      password: '666',
      timeoutID: null, 
      interalID: null, 
      count: 0 
    }
  },
  methods: {
    onSetTimeCall() {
      console.log("onSetTimeCall-->");
      this.timeoutID = setTimeout(() => {
        console.log("我延时3秒才会打印");
      }, 3000); 
    },

    onSetTimeCallxy(name, pwd) {
      console.log("onSetTimeCallxy--> 立即打印：name:" + name + " pwd:" + pwd);
      this.timeoutID = setTimeout((x, y) => {
        console.log("我延时2秒打印参数> x:" + x + ", y:" + y);
      }, 2000, name, pwd);
    },

    onTimeoutClear() {
      if (this.timeoutID) { 
        console.log("onTimeoutClear------> 取消的定时器ID：" + this.timeoutID);
        clearTimeout(this.timeoutID);
        this.timeoutID = null; 
      } else {
        console.log("onTimeoutClear------> 没有可取消的定时器");
      }
    },

    onIntervalStart() {
      this.count = 0; 
      console.log("onIntervalStart--> 启动周期定时器");
      this.interalID = setInterval(() => {
        this.count++;
        console.log("周期打印 count:", this.count); 
      }, 1000);
    },

    onClearInter() {
      if (this.interalID) {
        console.log("onClearInter--> 停止的周期定时器ID：" + this.interalID);
        clearInterval(this.interalID);
        this.interalID = null; 
      } else {
        console.log("onClearInter--> 没有运行中的周期定时器");
      }
    }
  }
}
</script>

<style>
/* 前两个按钮：白色背景 + 黑色文字 + 灰色边框 */
button:nth-child(1),
button:nth-child(2) {
  background-color: #ffffff;
  color: #000000;
  border: 1rpx solid #cccccc;
}

/* 启动周期定时器按钮：蓝色背景 + 白色文字 */
.blue-btn {
  background-color: #007aff;
  color: #ffffff;
}

/* 警告按钮保持红色（取消、停止按钮） */
button[type="warn"] {
  background-color: #ff4d4f;
  color: #ffffff;
}

/* 通用按钮样式：边距、内边距、圆角 */
button {
  margin: 20rpx;
  padding: 15rpx 30rpx;
  border-radius: 8rpx;
}
</style>